import React from 'react';
import {Table} from 'antd'
import moment from 'moment'
import {connect} from 'dva'
import { load } from 'react-cookies';
class TableData extends React.Component {
    
    render(){
        const {loading}=this.props;
        const {achievementList}=this.props.plan;
        const columns = [       
            {
              title: '日期',
              dataIndex: 'date',
              render:text=>moment(text).format('YYYY-MM-DD'),
              width:150
            },    
            {
              title:'类型',
              dataIndex:'type',
              width:100
            },
            {
              title: '事项',
              dataIndex: 'todo',
              width:150
            },    
            {
              title: '状态',
              dataIndex: 'status',
              width:100,
              render: text => {
                if (text === 'active') {
                  return (
                    <div
                      title="进行中"
                      style={{ width: 12, height: 12, background: 'rgb(255,165,0)', borderRadius: '50%' }}
                    ></div>
                  );
                } else if (text === 'completed') {
                  return (
                    <div
                      title="完成"
                      style={{ width: 12, height: 12, background: 'rgb(69,199,0)', borderRadius: '50%' }}
                    ></div>
                  );
                } else {
                  return (
                    <div
                      title="放弃"
                      style={{ width: 12, height: 12, background: 'rgb(236,0,0)', borderRadius: '50%' }}
                    ></div>
                  );
                }
              },
            },    
            {
              title: '成就值',
              dataIndex: 'value',
            },    
            {
              title: '成就币',
              dataIndex: 'coin',
            },
        ]
        return(
            <div>
                <Table 
                    dataSource={achievementList}
                    columns={columns}
                    rowKey='_id'
                    loading={loading}
                    pagination={{
                        total:achievementList.length,
                        showTotal:total=>`共${total}条数据`,
                        showSizeChanger:true,
                        size:'small',
                        pageSizeOptions:['10','100','1000']
                    }}
                    scroll={{y:'70vh'}}
                />

            </div>
        )
    }
}

export default connect(({ plan, loading }) => ({ plan, loading: loading.effects['plan/getAchievementList'] }))(
    TableData,
  );